<template>
  <div
    class="CarouselContainer"
    @mouseenter="stopAutoPlay"
    @mouseleave="startAutoPlay"
  >
    <div ref="mySwiper" class="swiper-container" :id="currentIndex">
      <div class="swiper-wrapper">
        <div class="swiper-slide my-swiper-slide">
          <SurveyStartPage />
        </div>
        <div
          class="swiper-slide my-swiper-slide"
          v-for="(item, index) in items"
          :key="index"
        >
          <SurveyItemPage />
        </div>
      </div>
      <!-- 分页器 -->
      <!-- <div class="swiper-pagination"></div> -->
    </div>
  </div>
</template>
<script>
import SurveyItemPage from "./SwipItem/SurveyItemPage.vue";
import SurveyStartPage from "./SwipItem/SurveyStartPage.vue";

import Swiper from "swiper";
import "swiper/css/swiper.css";
export default {
  name: "IndexPage",
  props: ["currentIndex"],
  components: {
    SurveyItemPage,
    SurveyStartPage,
  },
  data() {
    return {
      currentSwiper: null,
      items: [{ name: "k1" }, { name: "k2" }],
    };
  },
  watch: {
    //slide数据发生变化时,更新swiper
    slideList: {
      deep: true,
      // eslint-disable-next-line
      handler(nv, ov) {
        console.log("数据更新了");
        this.updateSwiper();
      },
    },
  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    CheckPage(index) {
      this.currentSwiper.slideTo(index, 500, false);
    },
    //鼠标移入暂停自动播放
    stopAutoPlay() {
      //  this.currentSwiper.autoplay.stop()
    },
    //鼠标移出开始自动播放
    startAutoPlay() {
      // this.currentSwiper.autoplay.start()
    },
    //初始化swiper
    initSwiper() {
      // eslint-disable-next-line
      let vueComponent = this; //获取vue组件实例
      //一个页面有多个swiper实例时，为了不互相影响,绑定容器用不同值或变量绑定
      this.currentSwiper = new Swiper("#" + this.currentIndex, {
        direction: "vertical",
        mousewheel: true,
        initialSlide: 0, //默认展示
        // loop: true, // 循环模式选项
        autoHeight: "true", //开启自适应高度,容器高度由slide高度决定
        //分页器
        pagination: {
          el: ".swiper-pagination",
        },
        on: {
          //此处this为swiper实例
          //切换结束获取slide真实下标
          slideChangeTransitionEnd: function () {
            console.log(
              vueComponent.$props.currentIndex + "号swiper实例真实下标",
              this.realIndex
            );

            vueComponent.$emit("checkpage", this.realIndex);
          },
          //绑定点击事件,解决loop:true时事件丢失
          // eslint-disable-next-line
          click: function (event) {
            console.log(
              "你点击了" + vueComponent.$props.currentIndex + "号swiper组件"
            );
          },
          transitionEnd: function () {
            // if (this.realIndex == 0) {
            //   vueComponent.$refs.homeComponent.addAnimate();
            // } else {
            //   vueComponent.$refs.homeComponent.removeAnimate();
            // }
          },
        },
        // autoplay: {
        //   //自动播放,不同版本配置方式不同
        //   delay: 3000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: false
        // },
      });
    },

    //销毁swiper
    destroySwiper() {
      try {
        this.currentSwiper.destroy(true, false);
      } catch (e) {
        console.log("删除轮播");
      }
    },
    //更新swiper
    updateSwiper() {
      this.destroySwiper();
      this.$nextTick(() => {
        this.initSwiper();
      });
    },
    slideTo(index) {
      this.currentSwiper.slideTo(index, 500, false);
    },
  },
};
</script>
<style scoped>
.CarouselContainer {
  width: 100%;
  height: 100vh;
  /*background-color: gray;*/
}

/*slide样式*/
.my-swiper-slide {
  /*height: 300px;
    /*background-color: pink;*/
}

/*swiper容器样式*/
.swiper-container {
  width: 100%;
  height: 100%;
  /*width: 700px;
    border: 1px solid red;*/
}

/*自定义分页器按钮被点击选中时的样式*/
/deep/.swiper-pagination-bullet-active {
  /*background-color: #d5a72f !important;
    width: 20px;*/
}

/*自定义分页器按钮常规样式*/
/deep/.swiper-pagination-bullet {
  /* background-color: #9624bf;
    opacity: 1;
    width: 20px;*/
}
</style>
